<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS类拓展</title>
  <style>
    .class_add {
      font-size: 30px;
    }
    .class_delete{
      color:blueviolet
    }
    .class_edit_1 {
      font-weight: 500;
    }
    .class_edit_2 {
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="el-color el-font">
    </div>
    <div class="content class_delete class_edit_1">Hello World</div>
  </div>
</body>
<script>
  /** 1. 背景
   *     HTML5 代表着与以前的 HTML 截然不同的方向。在所有以前的 HTML 规范中，从未出现过描述JavaScript 接口的情形，HTML 就是一个纯标记语言。JavaScript
   *     绑定的事，一概交给 DOM 规范去定义。然而，HTML5 规范却包含了与标记相关的大量 JavaScript API 定义。其中有的 API 与 DOM 重合，定义了浏览器应该提供
   *     的 DOM 扩展。
   * **/

  /** 2. CSS 类扩展
   *     a.定义：为了适应开发者和他们对 class 属性的认可，HTML5 增加了一些特性以方便使用 CSS 类。
   *     b.getElementsByClassName():是 HTML5 新增的最受欢迎的一个方法，暴露在 document 对象和所有 HTML 元素上,方法接收一个参数，
   *       即包含一个或多个类名的字符串，返回类名中包含相应类的元素的 NodeList。如果提供了多个类名，则顺序无关紧要。
   *       + 方法只会返回以调用它的对象为根元素的子树中所有匹配的元素。
   *       + 在 document 上调用 getElementsByClassName() 返回文档中所有匹配的元素;
   *       + 在特定元素上调用 getElementsByClassName() 则返回该元素后代中匹配的元素。
   *       + 如果要给包含特定类（而不是特定 ID 或标签）的元素添加事件处理程序，使用这个方法会很方便。不过要记住，因为返回值是 NodeList 为一个伪数组；
   *     c.classList 属性:
   *       + 要操作类名，可以通过 className 属性实现添加、删除和替换。但 className 是一个字符串，所以每次操作之后都需要重新设置这个值才能生效，
   *         即使只改动了部分字符串也一样。
   *       + HTML5 通过给所有元素增加 classList 属性为这些操作提供了更简单也更安全的实现方式。classList 是一个新的集合类型 DOMTokenList 的实例。
   *         与其他 DOM 集合类型一样，DOMTokenList也有 length 属性表示自己包含多少项，也可以通过 item()或中括号取得个别的元素。此外，DOMTokenList 
   *         还增加了以下方法。
   *         -  add(value)，向类名列表中添加指定的字符串值 value。如果这个值已经存在，则什么也不做。
   *         -  contains(value)，返回布尔值，表示给定的 value 是否存在。
   *         -  remove(value)，从类名列表中删除指定的字符串值 value。
   *         -  toggle(value)，如果类名列表中已经存在指定的 value，则删除；如果不存在，则添加。
   * **/
   function checkGetElementsByClassName(){
     // 1.获取包含类 el-color 和 el-font 的节点
     let nodeList = document.getElementsByClassName('el-color el-font');//没有被替换成类 el-color 元素的子树中包含类 el-font 元素
     console.log(nodeList);//HTMLCollection [div.el-color.el-font]
     // 2.获取 id 为  app 的元素的子树中包含了类 content 的元素；
     let contentNode = document.getElementById('app').getElementsByClassName('content');
     console.log(contentNode);
     // 3.给类为 content 的元素设置点击事件
     let contentDOM = document.getElementsByClassName('content')[0];
     contentDOM.onclick = function(e){
       console.log(e.target.className);
     }
   }
  //  checkGetElementsByClassName();
  
  // 采用 className 来测试添加、删除、修改 类
  function checkClassName(operation){
    // 1.获取元素
    let contentDOM = document.getElementsByClassName('content')[0];
    // 2.获取所有的类名字符串，并将其转换成数组形式
    let classNameList = contentDOM.className.split(' ');
    // 3.添加类
    if(operation === 'add'){
      if(classNameList.indexOf('class_add') === -1){
        contentDOM.className = contentDOM.className +' class_add';
        console.log('classNameList--',classNameList);//静态
      }
    }
    // 4.删除类
    if(operation === 'delete'){
      let index = classNameList.indexOf('class_delete');
      if(index !== -1){
        classNameList.splice(index,1);
        contentDOM.className = classNameList.join(' ');
        console.log('classNameList--',classNameList);//静态
      }
    }
    // 5.编辑类
    if(operation === 'edit'){
      let index = classNameList.indexOf('class_edit_1');
      if(index !== -1){
        // 如果存在则修改
        classNameList.splice(index,1,'class_edit_2');
        contentDOM.className = classNameList.join(' ');
      } else {
        // 如果没有则添加
        contentDOM.className = contentDOM.className +' class_name';
        console.log('classNameList--',classNameList);//静态
      }
    }
  }
  // checkClassName('add');
  // checkClassName('delete');
  // checkClassName('edit');

  // 采用 classList 来测试添加、删除、修改 类
  function checkClassList(){
    //1. 获取 DOM 元素
    let contenDOM = document.getElementsByClassName('content')[0];
    //2. 给 contentDOM 添加类样式
    contenDOM.classList.add('add_content');//不同名类样式
    contenDOM.classList.add('add_content');//同名类样式
    //3. 确定 contentDOM 包含某个类样式
    console.log(contenDOM.classList.contains('class_delete_1'));//false
    console.log(contenDOM.classList.contains('class_delete'));//true
    //4. 从类样式列表中删除指定的类样式
    contenDOM.classList.remove('class_delete');
    //5. 如果类名列表中已经存在指定的 value，则删除；如果不存在，则添加。
    contenDOM.classList.toggle('content-22')
  }
  checkClassList();
</script>
</html>
